<template>
  <div class="boss">
    <div class="box" v-for="(v,i) in arr" :key="i">
      <div class="box-left">
        <img :src="v.img" alt="" />
      </div>
      <div class="box-right">
        <h6>{{v.h6}}</h6>
        <p>{{v.p}}&nbsp;&nbsp;万关注</p>
      </div>
    </div>
    
    
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[{img:"/video/3.png",h6:"明日方舟",p:"544"},
            {img:"/video/4.png",h6:"王者荣耀",p:"3705"},
            {img:"/video/5.png",h6:"泰拉瑞亚",p:"216"},
            {img:"/video/6.png",h6:"原神",p:"1091"},
            {img:"/video/7.png",h6:"忍者必须死3",p:"221"},
            {img:"/video/8.png",h6:"爆裂魔女",p:"78"}]
        }
    }
};
</script>

<style scoped>
.boss{
  display: flex;
  flex-wrap: wrap;
}
.box {
  width: 1.6rem;
  height: 0.482rem;
  /* background-color: rgb(192, 149, 192); */
  margin-left: 0.2rem;
  display: flex;
  justify-content:space-between;
  margin-bottom: 0.2rem;
}
.box-left{
    width: 0.45rem;
    height: 0.45rem;
    /* background-color: rgb(166, 214, 127); */
}
.box-left img{
     width: 0.45rem;
    height: 0.45rem;
    border-radius: 0.09rem;
    display: flex;
}
.box-right{
    width: 1.126rem;
    height: 0.416rem;
    /* background-color: rgb(128, 207, 203); */
    margin-left:0.1rem ;
}
.box-right h6{
    color: #333;
    font-size: 0.16rem;
}
.box-right p{
    color: #999;
    font-size: 0.14rem;
    margin-top: 0.03rem;
}
</style>